<script>
// 引出组合式api
import { computed, onBeforeMount, toRefs, ref } from "vue";

// pinia状态管理
import { useBookcase } from "../../stores/bookcase.js";
import { useRouter } from "vue-router";
export default {
  // 接收参数
  props: ["userinfo"],

  setup(props, { emit }) {
    // 使用pinia
    const bookcaseStore = useBookcase();

    // 结构参数
    let { userinfo } = toRefs(props);

    // 路由对象
    let router = ref({});

    // 过滤器
    let filters_time = (val) => {
      if (val > 1000000000) {
        let oldTime = parseInt(val);
        let newTime = new Date().getTime();
        let dTime = newTime - oldTime;
        if (dTime / 1000 < 60) return parseInt(dTime / 1000) + "秒前";
        else if (dTime / 1000 / 60 < 60)
          return parseInt(dTime / 1000 / 60) + "分前";
        else if (dTime / 1000 / 60 / 60 < 24)
          return parseInt(dTime / 1000 / 60 / 60) + "小时前";
        else if (dTime / 1000 / 60 / 60 / 24 < 30)
          return parseInt(dTime / 1000 / 60 / 60 / 24) + "天前";
        else if (dTime / 1000 / 60 / 60 / 24 / 30 < 12)
          return parseInt(dTime / 1000 / 60 / 60 / 24 / 30) + "月前";
        else return parseInt(dTime / 1000 / 60 / 60 / 24 / 30 / 12) + "年前";
      }
    };

    // 加入书架方法
    let foucsFun = (BookId) => {
      // 本地取历史记录
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));

      // console.log(BookId, userinfo.history);

      // 拿到下标
      let index = userinfo.history.findIndex((item) => item.BookId == BookId);

      let latest = parseInt(Math.random() * 1000) + 1000;
      let readingTitle = `第${0}章`;
      let latestTitle = `第${latest}章`;
      // let BookId = userinfo.history[index].BookId;
      let isEnd = BookId % 2 == 0 ? true : false;
      let recent = userinfo.bookcase.length ? false : true;

      // 生成对象
      let target = {
        reading: 0,
        readingTitle,
        latest,
        latestTitle,
        recent,
        BookId,
        BookName: userinfo.history[index].BookName,
        BookImage: userinfo.history[index].BookImage,
        Author: userinfo.history[index].Author,
        isEnd,
      };

      console.log(target);
      userinfo.bookcase.unshift(target);
      localStorage.setItem("userinfo", JSON.stringify(userinfo));

      // 调用父类方法更新视图
      updateLocalStorage();
    };

    // 更新副布局方法
    let updateLocalStorage = () => {
      emit("updateLocalStorage");
    };

    // 详情页跳转
    let details = (id) => {
      router.value.push({ path: "/Details", query: { id: id } });
    };

    // 路由对象初始化
    let routerInit = () => {
      router.value = useRouter();
    };

    // 选中的数组
    let bookChecked = computed({
      get: () => bookcaseStore.bookChecked,
      set: (v) => (bookcaseStore.bookChecked = v),
    });

    // 选中状态切换
    let toggleFun = (BookId) => {
      if (bookChecked.value.includes(BookId))
        bookChecked.value = bookChecked.value.filter(
          (_BookId) => _BookId != BookId
        );
      else bookChecked.value.push(BookId);
      historyDelConEve();
    };

    // 历史记录的删除按钮高亮事件
    let historyDelConEve = () => {
      // 长度大于0长高亮
      let historyDelCon = bookChecked.value.length > 0;
      bookcaseStore.$patch({ historyDelCon });
    };

    onBeforeMount(() => {
      // 路由对象初始化
      routerInit();
    });

    return {
      bookChecked, // 选中的数组
      toggleFun, // 切换按钮
      details, // 详情页跳转方法
      foucsFun, //加入书架方法

      // 是否编辑状态
      isHistoryEdit: computed(() => bookcaseStore.isHistoryEdit),

      // 过滤器
      filters_time,

      // 浏览历史数据
      history: computed(() => userinfo.value.history),
      bookcase: computed(() => userinfo.value.bookcase),
    };
  },
};
</script>

<template >
  <div class="HistoryRecord">
    <div class="book-block show">
      <div
        class="book-item"
        v-for="(item, i) in history"
        :key="item.BookId"
        @click="details(item.BookId)"
      >
        <div
          :class="[
            'checkbox',
            { show: isHistoryEdit },
            { checked: bookChecked.includes(item.BookId) },
          ]"
          @click.stop="toggleFun(item.BookId)"
        ></div>
        <div
          class="focus"
          @click.stop="foucsFun(item.BookId)"
          v-show="!bookcase.some((o) => o.BookId == item.BookId)"
        >
          <span>+</span> 书架
        </div>
        <div
          :class="['book-item-box', 'show', { edit: isHistoryEdit }]"
          :style="{
            'transition-delay': 0.1 * (i - 1) + 's',
          }"
        >
          <div :class="['img', { con: item.isEnd }]">
            <img :src="item.BookImage" alt="" />
          </div>
          <div class="right">
            <div class="book-name text-ellipsis-1">{{ item.BookName }}</div>
            <div class="book-author text-ellipsis-1">{{ item.Author }}</div>
            <div class="time text-ellipsis-1">
              {{ filters_time(item.lastTime) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.HistoryRecord {
  .book-block {
    height: 0;
    padding: 0;
    &.show {
      padding: 10px 0;
      height: auto;
    }
    .book-item {
      position: relative;
      margin-top: 16px;
      height: 100px;
      .book-item-box {
        display: flex;
        position: absolute;
        top: 0;
        // left: 0;
        width: 100%;
        height: 100%;
        padding: 0 16px;
        z-index: 10;
        box-sizing: border-box;

        // 过渡动画效果
        transition: all 0.3s ease;
        left: 100px;
        opacity: 0;

        &.show {
          left: 0;
          opacity: 1;
          transition-delay: 0s;
        }

        &.edit {
          z-index: 8;
          left: 26px;
          width: calc(100% - 26px);
        }
      }

      .checkbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
        width: 100%;
        opacity: 0;
        z-index: 9;
        transition: all 0.3s ease;
        &.show {
          opacity: 1;
        }
        &::before {
          content: "";
          position: absolute;
          display: block;
          top: 0;
          bottom: 0;
          left: 20px;
          margin: auto;
          width: 8px;
          height: 8px;
          border: 4px solid #c0bfc6;
          border-radius: 50%;
        }
        &.checked::before {
          border-color: #fa727e;
        }
      }

      .focus {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 16px;
        margin: auto;
        display: flex;
        align-items: center;
        height: 28px;
        border-radius: 14px;
        z-index: 12;
        padding: 0 16px;
        box-sizing: border-box;
        border: 1px solid #fb5664;
        background-image: linear-gradient(90deg, #fa727e, #fb4576);
        font-size: 12px;
        color: #fff;
        span {
          font-size: 18px;
          display: block;
          margin-right: 4px;
        }
      }

      .img {
        width: 75px;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid #fa727d5c;
        margin-right: 15px;
        position: relative;

        &.con::after {
          content: "完结";
          font-size: 12px;
          position: absolute;
          bottom: 5px;
          right: 5px;
          display: block;
          padding: 0 5px;
          width: max-content;
          height: 18px;
          border-radius: 4px;
          line-height: 18px;
          color: rgba(255, 255, 255, 0.743);
          background-color: rgba($color: #000, $alpha: 0.4);
        }
      }

      .right {
        width: calc(100% - 90px);
        height: 100px;
        overflow: hidden;
        .book-name {
          line-height: 26px;
          color: #373744;
          font-size: 18px;
          font-weight: bold;
        }

        .book-author {
          line-height: 24px;
          color: #9d9da6;
          font-size: 12px;
        }

        .time {
          margin-top: 6px;
          line-height: 22px;
          color: #9d9da6;
          font-size: 12px;
        }
      }
    }
  }
}
</style>